<template>

  <div>
    <!--<p>我是新建地址</p>-->
    <div id="addressDiv">

      <div class="address">
        <ul class="addresssInfor">
          <li v-for="(item,index) in arrs[0]">
            <div><p><span>{{item.user_name}}</span><span>{{item.user_phone}}</span></p>
              <p @click="getAdderss(index)" ref="menuItem">{{item.address}}</p></div>
            <img src="../assets/xiugai.png" alt="" class="xiugaiAddress" @click="modificationAddress(index)"><span
            style="display: none" ref="addressID">{{item.address_id}}</span>
          </li>
        </ul>
      </div>
      <div class="xinzhengBtns">
        <button @click="addNewAddress()">+&nbsp;新建地址</button>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'

  var qs = require("qs");
  axios.defaults.headers.post["Content-Type"] =
    "application/x-www-form-urlencoded";
  export default {
    name: 'third',
    data() {
      return {
        newAddressTocken: '',
        address: '',
        requestId: '',
        address_id: '',
        area_id: '',
        city_id: '',
        province_id: '',
        titles: '',
        user_name: '',
        user_phone: '',
        arrs: [],
      }
    },

    created() {
      var that = this;
      that.newAddressTocken = sessionStorage.getItem('AuthToken');
      var config = {
        method: 'post',
        url: "http://test.zjapi.xianxiangle.com/address_list",
        data: {AuthToken: that.newAddressTocken},
      };
      axios(config).then(function (res) {
        console.log(res.data.data)
        for (var i = 0; i < res.data.data.length; i++) {
          // console.log(res.data.data[i].address_id);
          that.arrs.push(res.data.data)
          // that.area_id = res.data.data[i].area_id,
            that.city_id = res.data.data[i].city_id,
            that.province_id = res.data.data[i].province_id,
            that.address_id = res.data.data[i].address_id,
            that.titles = res.data.data[i].titles,
            that.address = res.data.data[i].address,
            that.user_name = res.data.data[i].user_name,
            that.user_phone = res.data.data[i].user_phone,
            console.log(that.address_id);
          // sessionStorage.setItem('address_id', that.address_id)
          console.log(that.area_id);
          console.log(that.province_id);
          console.log(that.user_name);
          console.log(that.user_phone);
          console.log(that.titles);
          console.log(that.address);
        }
      }).catch(function (err) {

      })

    },
    methods: {
      addNewAddress() {
        this.$router.push({path: '/five'})
      },
      getAdderss(index) {
        console.log(this.$refs.menuItem[index].innerText);
        var addInfor = this.$refs.menuItem[index].innerText;

        console.log(this.$refs.addressID[index].innerText);
        var addID=this.$refs.addressID[index].innerText
        // 选中地址并传递到评估页面
        this.$router.push({path: '/second',query:{addInfor:addInfor,addID:addID}})
      },
      modificationAddress(index){
        var addID=this.$refs.addressID[index].innerText
        this.$router.push({path: '/modificationAddress',query:{addID:addID}})
      }
    },
//   components: {
//     AppHeader
//   }
  }
</script>

<style lang="scss" scoped>
  body {
    background-color: #F5F5F9;
  }

  #addressDiv {
    width: 100%;
    margin: auto;
    header {
      display: flex;
      justify-content: space-between;
      background: white;
      padding: 1rem;

      h2 {
        font-size: 2.0rem;
        margin-left: -2rem;
        text-align: center;
        font-weight: 500;
      }
      p {
        //font-family: "黑体";
        //color: royalblue;
        font-size: 2rem;
        img {
          width: 2rem;
          height: 2rem;
        }
        span:nth-last-child(1) {
          font-size: 2rem;
          font-weight: 400;
          //display: block;
          color: blueviolet;
          position: relative;
          top: -0.3rem;
          left: 0.5rem;
        }
      }
    }
    .address {
      width: 100%;
      //margin-top: 2rem;
      ul {
        width: 100%;
        background-color: white;
        li {
          width: 100%;
          height: 6rem;
          padding: 1rem;
          //padding-bottom: 2rem;
          border-bottom: 1px solid #CCCCCC;
          display: flex;
          justify-content: space-around;
          font-weight: 500;
          div {
            width: 80%;
            text-align: left;
            p:nth-child(1) {
              font-size: 2rem;
              color: black;
              font-family: PingFangSC-Medium;
              //font-weight: 600;
            }
            p:nth-child(2) {
              font-size: 1.6rem;
              color: #cccccc;
              margin-top: 1rem;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              //font-weight: 700;
            }
          }
          img {
            width: 2rem;
            height: 2rem;

            position: relative;
            right: 1rem;
          }
        }
      }
    }
    .xinzhengBtns {
      width: 100%;
      margin: auto;
      text-align: center;
      margin-top: 1rem;
      position: fixed;
      left: 0;
      bottom: 1rem;
      button {
        width: 96%;
        height: 4rem;
        line-height: 4rem;
        //font-size: 2rem;
        color: white;
        background: #32D69C;
        text-align: center;
        outline: none;
        border: 0;
        span {
          display: inline-block;
          margin-right: 0.5rem;

          font-size: 3.4rem;
        }
      }
    }
  }
</style>
